window.onload = function () {
  //1.饼图.
  let myPieChart = echarts.init(document.querySelector(".pie"));
  // 指定图表的配置项和数据
  let pieOption = {
    title: {
      text: "籍贯 Hometown",
    },
    tooltip: {
      trigger: "item",
      formatter: "{a} <br/>{b}省  <strong>{c}</strong>人 占比{d}%",
    },
    series: [
      {
        //系列名称
        name: "各地人员分布",
        //饼图类型
        type: "pie",
        //内外半径
        radius: ["10%", "65%"],
        //圆心点
        center: ["50%", "50%"],
        //area表示面积模式，radius表示半径模式
        roseType: "area",
        //每一项的设置
        itemStyle: {
          borderRadius: 4, //边框圆角
        },
        //引导线
        labelLine: {
          length: 30,
          length2: 10,
        },
        //数据: 数值和数据项名称
        data: [
          { value: 40, name: "北京" },
          { value: 38, name: "山东" },
          { value: 32, name: "上海" },
          { value: 30, name: "江苏" },
          { value: 28, name: "河北" },
          { value: 26, name: "山西" },
          { value: 22, name: "河南" },
          { value: 18, name: "辽宁" },
        ],
      },
    ],
  };
  //使用刚指定的配置项和数据显示图表。
  myPieChart.setOption(pieOption);

  //--------------------------------------------------------------------------------
  //2.线形图.
  let myLineChart = echarts.init(document.querySelector('.line'));
  let lineOption = {
    // 图例
    legend: {
      top: 20,
    },
    // 鼠标移入的提示
    tooltip: {
      trigger: 'axis', // 轴触发
      position: function (pt) {
        // pt是一个数组，pt[0]表示横坐标位置，'10%'表示Y轴方向始终保持距离顶部10%的距离
        // 所以意思是，提示框的位置会跟随鼠标左右移动，但纵向上的位置始终保持不变。
        return [pt[0], '10%']; 
      }
    },
    // 标题
    title: {
      text: '薪资 Salary',
      textStyle: {
        color: '#6d767e'
      }
    },
    xAxis: {
      type: 'category',
      boundaryGap: false, // x轴两边的留白策略，false表示不留空白
      data: ['张三', '李四', '张飞', '赵云', '狗哥', '张三', '李四', '张飞', '赵云', '狗哥', '张三', '李四', '张飞', '赵云', '狗哥', '张三', '李四', '张飞', '赵云', '狗哥']
    },
    yAxis: {
      type: 'value',
      // Y轴类型为value，则留白策略指的是对数据的延伸。
      // 比如，图表中的数据最大值是17000，则Y轴最大数字大约是 17000 + 17000 * 50%
      boundaryGap: [0, '50%'],
    },
    // 数据缩放组件
    dataZoom: [
      // {
      //   type: 'inside', // 将拖动的条内置到轴里面，看不见了，但是可以拖动
      //   start: 0,
      //   end: 10
      // },
      {
        type: 'slider', // 拖动条显示到轴的外面（默认就是slider类型）
        start: 0, // 拖动滑块起始位置（这是一个百分比）
        end: 15 // 拖动滑块结束位置（这是一个百分比）
      }
    ],
    // 数据部分
    series: [
      {
        name: '期望薪资',
        type: 'line',
        smooth: true, // 表示使用平滑曲线
        symbol: 'none', // 线上拐点位置的样式，none表示没有；也可以是实心圆、空心圆、方块.....
        itemStyle: { // 单独控制这条线的颜色
          color: '#ee6666'
        },
        data: [8300, 9600, 15000, 17000, 12000, 8300, 9600, 15000, 17000, 12000, 8300, 9600, 15000, 17000, 12000, 8300, 9600, 15000, 17000, 12000]
      },
      {
        name: '实际薪资',
        type: 'line',
        smooth: true,
        symbol: 'none',
        itemStyle: { // 单独控制这条线的颜色
          color: '#5470c6'
        },
        data: [9600, 15000, 17000, 12000, 8300, 9600, 15000, 17000, 12000, 8300, 9600, 15000, 17000, 12000, 8300, 9600, 15000, 17000, 12000, 13000]
      }
    ]
  };
  myLineChart.setOption(lineOption);
  //--------------------------------------------------------------------------------

  //发送ajax请求获取真实的数据.
  axios({
    method: "get",
    url: "/student/list",
  }).then((res) => {
    //console.log(res);
    if (res.data.code == 0) {
      let data = res.data.data; //所有的学生数据,是一个数组.
      console.log(data);

      //------处理饼图的数据--------------------------------------------------------------------------
      let pieData = [{ name: data[0].province, value: 1 }]; //饼图数据数组.
      //遍历所有的学生数据,从下标为1的开始.
      for (let i = 1; i < data.length; i++) {
        //判断data[i].province在不在pieData中,如果在value++,如果不在就给pieData再添加一个省.
        //假设法-假设不在
        let flag = false;
        //判断到底在不在
        for (let j = 0; j < pieData.length; j++) {
          if (data[i].province == pieData[j].name) {
            flag = true;
            pieData[j].value++;
            break;
          }
        }
        //如果上面验证做完了,flag还是为原来的false,说明假设成立.
        //不在就应该加进去
        if (flag == false) {
          pieData.push({
            name: data[i].province,
            value: 1,
          });
        }
      }
      //把饼图中的数据给替换
      pieOption.series[0].data = pieData;
      //使用刚指定的配置项和数据显示图表。
      myPieChart.setOption(pieOption);

      //------处理线形图的数据--------------------------------------------------------------------------
      let lineNameArr = [];
      let lineSalaryArr = [];
      let lineTrueSalaryArr = [];
      data.forEach(item=>{
        lineNameArr.push(item.name); //学生姓名组成的数组
        lineSalaryArr.push(item.salary); //学生的期望薪资组成的数组
        lineTrueSalaryArr.push(item.truesalary);//学生的实际薪资组成的数组.
      });
      //替换线形图中option的数据
      lineOption.xAxis.data = lineNameArr;
      lineOption.series[0].data =lineSalaryArr;
      lineOption.series[1].data =lineTrueSalaryArr;
      //根据新的数据组成的option重新渲染.
      myLineChart.setOption(lineOption);

    }
  });
};
